<template>
  <view>
    <Navbar title="详情页面"></Navbar>
    <ShowTips></ShowTips>
    <SlidePage ref="swiperDataRef" @loadData="loadDataNext">
      <view class="queston-detail">
        <view class="title-info">
          <QuestionItem :data="questionData" :showDetail="true"></QuestionItem>
        </view>
        <view class="question" v-if="questionData.question">
          <view class="question-title">问题描述</view>
          <uvParse :content="questionData.question"></uvParse>
        </view>

        <view class="line"></view>
        <view class="question-content" v-if="readMode == 1 || showAnswer">
          <view class="title">- <text class="inner">问题解析</text> -</view>
          <uvParse
            :content="questionData.answerAnalysis"
            v-if="questionData.answerAnalysis"
          ></uvParse>
        </view>
      </view>
    </SlidePage>
    <Footer
      v-if="pageOpStore.getOp().showCollect"
      :objectId="questionData.questionId + ''"
      :collectType="1"
      @updateCollect="updateCollect"
      :haveCollect="questionData.haveCollect"
    >
      <view class="page-op">
        <view class="btn btn-mode" @click="changeMode">
          <text>{{ readMode === "0" ? "背题模式" : "阅读模式" }}</text>
          <text class="iconfont icon-exchange"></text>
        </view>
        <view
          class="btn show-answer"
          v-if="readMode != '' && readMode !== '1'"
          @click="showAnswerHandler"
          >查看答案</view
        >
      </view>
    </Footer>
  </view>
</template>

<script setup>
import uvParse from "@/pages/components/uv-parse/components/uv-parse/uv-parse.vue";
import QuestionItem from "./QuestionItem.vue";
import { LOCAL_STORAGE_KEY } from "@/utils/Constants.js";

import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, getCurrentInstance, nextTick, computed } from "vue";
const { proxy } = getCurrentInstance();
import { usePageOpStore } from "@/stores/pageOp";
const pageOpStore = usePageOpStore();

const categoryId = ref();
const currentId = ref();
const questionData = ref({});
const nextType = ref(null);

const loadDetail = async () => {
  let url = proxy.Api.getQuestionDetailNext;
  if (!pageOpStore.getOp().showCollect) {
    url = proxy.Api.getCollectNext + "?collectType=1";
  }
  let result = await proxy.Request({
    url: url,
    params: {
      currentId: currentId.value,
      categoryId: categoryId.value || "",
      nextType: nextType.value,
    },
  });
  if (!result) {
    return;
  }
  questionData.value = result.data;
  currentId.value = pageOpStore.getOp().showCollect
    ? result.data.questionId
    : result.data.collectId;
  //答案隐藏
  showAnswer.value = false;
};

const loadDataNext = (_nextType) => {
  nextType.value = _nextType;
  loadDetail();
};

onLoad((option) => {
  currentId.value = pageOpStore.getOp().showCollect
    ? option.questionId
    : option.collectId;
  categoryId.value = option.categoryId;
  nextType.value = null;
  loadDetail();
});

const updateCollect = (haveCollect) => {
  questionData.value.haveCollect = haveCollect;
};

//默认阅读模式 0
const readMode = ref("1");
const changeMode = () => {
  const _readMode = uni.getStorageSync(LOCAL_STORAGE_KEY.readMode.key);
  if (_readMode == "" || _readMode == "0") {
    uni.setStorageSync(LOCAL_STORAGE_KEY.readMode.key, "1");
    readMode.value = "1";
  } else {
    uni.setStorageSync(LOCAL_STORAGE_KEY.readMode.key, "0");
    readMode.value = "0";
  }
};

const showAnswer = ref(false);
const showAnswerHandler = () => {
  showAnswer.value = true;
};

onLoad(() => {
  readMode.value = uni.getStorageSync(LOCAL_STORAGE_KEY.readMode.key) || "0";
});
</script>

<style lang="scss" scoped>
.queston-detail {
  .question {
    padding: 10px;
    .question-title {
      font-weight: bold;
      font-size: 13px;
      line-height: 30px;
      color: #797878;
    }
    .detail {
      margin-top: 10px;
    }
  }
  .question-content {
    padding: 10px;
    font-size: 16px;
    .title {
      text-align: center;
      color: #767575;
      margin: 5px 0px 10px;
      .inner {
        font-weight: bolder;
        color: #1f282e;
      }
    }
  }
}

.page-op {
  display: flex;
  flex: 1;
  justify-content: space-around;
  font-size: 14px;
  .btn {
    width: 100%;
    margin: 0px 5px;
    padding: 8px 0px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
  }
  .btn-mode {
    background: #6663cd;
    .iconfont {
      color: #fff;
      font-size: 14px;
      margin-left: 2px;
    }
  }
  .show-answer {
    background: #aa6bd9;
  }
}
</style>